<template>
  <div class="login">
    <div class="container login-content">
      <div class="contents">
        <div class="left">
          <div class="title">
            <span>建筑采购就到 阿奇数</span>
          </div>
          <div class="introduced">
            <span>品类齐全/商家直供/专利保障/交易过程透明化</span>
          </div>
          <div class="image">
            <img class="login-img" src="../../../assets/images/login-img.png" alt="">
          </div>
        </div>
        <div class="right">
          <div class="right-content">
            <div class="type">
              <div :class="{'account' : loginType, 'account-active': !loginType}" @click="changeType(true)">账户登录</div>
              <div class="line" />
              <div :class="{'code-active' : !loginType, 'code' : loginType}" @click="changeType(false)">验证码登录</div>
            </div>
            <div v-if="loginType" class="content">
              <Account @registered="registered" @password="password" />
            </div>
            <div v-else class="content">
              <Verify @registered="registered" @password="password" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Account from '@/views/login/component/Account'
import Verify from '@/views/login/component/Verify'
export default {
  name: 'Login',
  components: {
    Account,
    Verify
  },
  data() {
    return {
      loginType: true
    }
  },
  methods: {
    changeType(type) {
      this.loginType = type
    },
    registered() {
      this.$router.push('/register')
    },
    password() {
      this.$router.push('/reset-password')
    }
  }
}
</script>

<style scoped lang="scss">
  .login{
    padding: 60px 0;
    background: #F5F5F5;
    .login-content{
      background: #FFFFFF;
      .contents{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 600px;
        .left{
          text-align: center;
          .title{
            font-size: 40px;
          }
          .introduced{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:16px;
            font-weight:400;
            line-height:21px;
            color:#8E8E93;;
            margin: 7px 0 51px 0;
          }
          .image{
            .login-img{
              width: 389px;
              height: 249px;
            }
          }
        }
        .right{
          .right-content{
            width:360px;
            height:310px;
            border:1px solid #E5E5E5;
            .type{
              display: flex;
              border-bottom: 1px solid #E5E5E5;
              line-height: 51px;
              justify-content: space-around;
              align-items: center;
              .account{
                color: #FF3B30;
                cursor:pointer
              }
              .account-active{
                color: #3D3D3D;
                cursor:pointer
              }
              .line{
                width:0px;
                height:16px;
                border:1px solid #E5E5E5;
              }
              .code{
                color: #3D3D3D;
                cursor:pointer
              }
              .code-active{
                color: #FF3B30;
                cursor:pointer
              }
            }
            .content{
              text-align: center;
              .iconfont{
                position: absolute;
              }
              .item{
                position: relative;
                .user{
                  font-size: 24px;
                  top: 26px;
                  left: 35px;
                }
                .pass{
                  font-size: 22px;
                  top: 26px;
                  left: 36px;
                }
                .key{
                  font-size: 20px;
                  top: 25px;
                  left: 36px;
                }
                .input{
                  width:317px;
                  height:42px;
                  border:1px solid #E5E5E5;
                  margin-top: 20px;
                  text-indent:44px;
                }
                .input-1{
                  width:225px;
                  height:42px;
                  border:1px solid #E5E5E5;
                  margin: 20px 0 15px 0;
                  text-indent:44px;
                }
                .btn-input{
                  width:92px;
                  height:42px;
                  background:#F1F1F1;
                  color: #8E8E93;
                }
              }
              .bottom-item{
                position: relative;
                .bottom{
                  width: 92px;
                  height: 42px;
                  background: #F1F1F1;
                  color: #8E8E93;
                  text-align: center;
                  line-height: 42px;
                  font-size:14px ;
                  position: absolute;
                  top: 20px;
                  right: 20px;
                  cursor:pointer
                }
              }
            }
          }
        }
      }
    }
  }
</style>
